<template>
  <!-- 门诊医生-中医处方-药品列表 -->
  <span>
    <div class="flex justify-between items-center p-2 mt-4 order-header">
      <a-space class="pointer-events-none">
        <div class="font-bold w-20">中药处方{{ orderIndex + 1 }}</div>
        <a-radio-group v-model:value="orderData.zylb" size="small" button-style="solid">
          <a-radio-button value="饮片">饮片</a-radio-button>
          <a-radio-button value="颗粒">颗粒</a-radio-button>
        </a-radio-group>
        <div class="ml-4 text-[#22222299]">{{ orderTotal?.cydfsl || 0 }}味 ，单付 {{ orderTotal?.df || 0 }}g，总计{{ orderTotal?.zj || 0 }}g</div>
      </a-space>
      <slot></slot>
    </div>
    <div class="mt-2 border pointer-events-none">
      <!-- 中医药品列表 -->
      <div class="flex flex-wrap">
        <TCMItem v-for="item in medicineList" :key="item.key" :medicine-item="item" />
      </div>
      <div class="border-t border-dashed flex justify-between items-center py-2 pr-8">
        <div class="flex px-4">
          <div class="mr-2 min-w-[60px]">{{ orderData.fssl }}付</div>
          <div class="mr-2 min-w-[60px]">{{ orderData.yf }}</div>
          <div class="mr-2 min-w-[60px]">{{ orderData.pl }}</div>
          <div class="mr-2 min-w-[60px]">{{ orderData.jcl }}</div>
          <div class="mr-2 min-w-[60px]">{{ orderData.cmemo }}</div>
        </div>
      </div>
    </div>
  </span>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import TCMItem from './TCMItem'

const props = defineProps({
  orderIndex: {
    type: Number,
    default: 0
  },
  orderItem: {
    type: Object,
    default: () => ({})
  }
})
const orderData = ref(props.orderItem)
const orderTotal = ref({})
const medicineList = ref([])
//获取合计信息
const getTotal = async () => {
  const res = await post('/outp/outpClinicalOrder/getOutpTCMTotalInfo', { cfdh: orderData.value.cfdh, fs: orderData.value.fssl })
  if (res.code !== 0) return message.error(res.msg)
  orderTotal.value = res.data
}
//获取药品列表
const getMedicineList = async () => {
  const res = await post('/outp/outpClinicalOrder/getOutpTCMDetailList', { cfdh: orderData.value.cfdh })
  if (res.code !== 0) return message.error(res.msg)
  if (res.data.length > 0) {
    medicineList.value = res.data
    getTotal()
  } else {
    medicineList.value = [{ key: 0 }]
  }
}
onMounted(() => {
  getMedicineList()
})
</script>
<style lang="less" scoped>
.order-header {
  background-color: var(--thin-color);
  border-radius: 2px;
  &:first-child {
    margin-top: 0;
    border: none;
  }
}
</style>
